﻿<script type="text/javascript">
    var Charts = function () {

        return {
            //main function to initiate the module

            init: function () {
            },

            initCharts: function () {

                //Interactive Chart

                function chart2() {
                    var pageviews = @Html.Raw(ViewBag.Chart);

                    var plot = $.plot($("#chart_2"), [{
                        data: pageviews,
                        label: "Lượt Truy Cập"
                    }
                    ], {
                        series: {
                            lines: {
                                show: true,
                                lineWidth: 2,
                                fill: true,
                                fillColor: {
                                    colors: [{
                                        opacity: 0.05
                                    }, {
                                        opacity: 0.01
                                    }
                                    ]
                                }
                            },
                            points: {
                                show: true
                            },
                            shadowSize: 2
                        },
                        grid: {
                            hoverable: true,
                            clickable: true,
                            tickColor: "#eee",
                            borderWidth: 0
                        },
                        colors: ["#d12610", "#37b7f3", "#52e136"],
                        xaxis: {
                            ticks: 11,
                            tickDecimals: 0
                        },
                        yaxis: {
                            ticks: 11,
                            tickDecimals: 0
                        }
                    });

                    function showTooltip(x, y, contents) {
                        $('<div id="tooltip">' + contents + '</div>').css({
                            position: 'absolute',
                            display: 'none',
                            top: y + 5,
                            left: x + 15,
                            border: '1px solid #333',
                            padding: '4px',
                            color: '#fff',
                            'border-radius': '3px',
                            'background-color': '#333',
                            opacity: 0.80
                        }).appendTo("body").fadeIn(200);
                    }

                    var previousPoint = null;
                    $("#chart_2").bind("plothover", function (event, pos, item) {
                        $("#x").text(pos.x.toFixed(2));
                        $("#y").text(pos.y.toFixed(2));

                        if (item) {
                            if (previousPoint != item.dataIndex) {
                                previousPoint = item.dataIndex;

                                $("#tooltip").remove();
                                var x = item.datapoint[0],
                                    y = item.datapoint[1];

                                showTooltip(item.pageX, item.pageY, item.series.label + " của ngày " + x + " là " + y);
                            }
                        } else {
                            $("#tooltip").remove();
                            previousPoint = null;
                        }
                    });
                }
                //graph
                chart2();
            },
        };
    }();
 </script>
<div id="chart_2" class="chart"></div>
<script src="/AssetsAdmin/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>

   <!-- BEGIN PAGE LEVEL SCRIPTS -->
 <!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="/AssetsAdmin/plugins/flot/jquery.flot.js"></script> 

<script>
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        Charts.init();
        Charts.initCharts();
    });
</script>